<template>
	<view class="invoice-container">
		<view class="form-container">
			<!-- 发票类型选择 -->
			<view class="form-item">
				<text class="label">发票类型</text>
				<view class="radio-group">
					<radio-group @change="onTypeChange" style="display: flex;align-items: center;">
						<label>
							<radio :value="1" :checked="invoiceType == 1" style="transform: scale(0.9);" />
							个人发票
						</label>
						<label style="margin-left: 10px;">
							<radio :value="2" :checked="invoiceType == 2" style="transform: scale(0.9);" />
							企业发票
						</label>
					</radio-group>
				</view>
			</view>

			<!-- 个人发票信息 -->
			<view>
				<view class="form-item" v-if="invoiceType == 1">
					<view class="label">名称</view>
					<input type="text" placeholder="开票人姓名（必填）" v-model="name" class="input" />
				</view>

			</view>
			<!-- 企业发票信息 -->
			<view v-if="invoiceType == 2">
				<view class="form-item">
					<view class="label">公司名称</view>
					<input type="text" placeholder="公司名称（必填）" v-model="companyName" class="input" />
				</view>
				<view class="form-item">
					<text class="label">税号</text>
					<input type="text" placeholder="纳税人识别号（必填）" v-model="taxNumber" class="input" />
				</view>
			</view>
			<view>
				<view class="form-item">
					<view class="label">手机</view>
					<input type="number" placeholder="开票人手机号" v-model="mobile" class="input" />

				</view>
				<view class="form-item">
					<view class="label">邮箱</view>
					<input type="text" placeholder="开票人邮箱" v-model="email" class="input" />
				</view>
			</view>
		</view>

		<!-- 企业发票信息 -->
		<view v-if="invoiceType == 2">
			<view style="padding: 10px;color: #999;">
				以下信息为非必填
			</view>
			<view style="background-color: #fff;padding: 15px;">
				<view class="form-item">
					<text class="label1">开户银行</text>
					<input type="text" placeholder="开户行名称" v-model="openbank" class="input" />
				</view>
				<view class="form-item">
					<text class="label1">银行账号</text>
					<input type="text" placeholder="开户银行账号" v-model="bankaccount" class="input" />
				</view>
				<view class="form-item">
					<text class="label1">单位电话</text>
					<input type="text" placeholder="单位联系电话" v-model="danweitelphone" class="input" />
				</view>
				<view class="form-item">
					<text class="label1">单位地址</text>
					<input type="text" placeholder="单位地址" v-model="danweiaddress" class="input" />
				</view>
			</view>
		</view>

		<!-- 保存按钮 -->
		<button class="save-btn" @click="saveInvoiceTitle">保存</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id:'',
			invoiceType: 1, // 默认个人发票
			name: '',
			companyName: '',
			taxNumber: '',
			mobile: '',
			email: '',
			openbank: '',
			bankaccount: '',
			danweitelphone: '',
			danweiaddress: '',

			// personalName: '',

			// taxNumber: '',
			// address: '',
			// phone: '',
			// bankInfo: ''
		};
	},
	onLoad(options) {
		console.log(options);
		if (options.id) {
			this.id = options.id;
			this.init();
		}
	},
	methods: {
		init() {
			this.$api.sendRequest({
				url: '/api/member/getInvoiceInfo',
				data: {
					id: this.id
				},
				success: res => {
					if (res.code == 0) {
						this.id = res.data.id;
						this.invoiceType = res.data.invoice_type;
						if (res.data.invoice_type == 2) {
							this.companyName = res.data.name;
						} else {
							this.name = res.data.name;
						}
						this.taxNumber = res.data.company_idcard;
						this.mobile = res.data.mobile;
						this.email = res.data.email;
						this.openbank = res.data.card_name;
						this.bankaccount = res.data.card_num;
						this.danweitelphone = res.data.company_mobile;
						this.danweiaddress = res.data.company_address;
					}
				}
			})
		},
		// 切换发票类型
		onTypeChange(e) {
			this.invoiceType = e.detail.value;
		},
		// 验证手机号只能输入数字
		validateMobile(e) {
			let value = e.detail.value;
			// 使用正则表达式只允许输入数字
			value = value.replace(/[^\d]/g, '');
			this.mobile = value;
		},
		// 保存发票抬头
		saveInvoiceTitle() {
			// 表单验证
			if (this.invoiceType == 1) {
				if (!this.name.trim()) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}
			} else {
				if (!this.companyName.trim()) {
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none'
					});
					return;
				}
				if (!this.taxNumber.trim()) {
					uni.showToast({
						title: '请输入纳税人识别号',
						icon: 'none'
					});
					return;
				}
			}
			let invoiceData = {};
			if (this.invoiceType == 1) {
				invoiceData = {
					id:this.id,
					invoice_type: this.invoiceType,
					name: this.name,
					mobile: this.mobile,
					email: this.email,
				};
			} else {
				invoiceData = {
					id:this.id,
					invoice_type: this.invoiceType,
					name: this.companyName,
					company_idcard: this.taxNumber,
					mobile: this.mobile,
					email: this.email,
					company_mobile: this.danweitelphone,
					company_address: this.danweiaddress,
					card_num: this.bankaccount,
					card_name: this.openbank
				};
			}
			this.$api.sendRequest({
				url: '/api/member/addinvoice',
				data: invoiceData,
				success: res => {
					if (res.code == 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				}
			})
		}
	}
};
</script>

<style scoped>
.form-container {
	background-color: #fff;
	padding: 20rpx;
}

.form-item {
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
}

.label {
	display: block;
	font-size: 28rpx;
	color: #666;
	width: 70px;
	text-align: center;
}

.label1 {
	display: block;
	font-size: 28rpx;
	color: #666;
	width: 80px;
	text-align: left;
}

.radio-group {
	display: flex;
	gap: 40rpx;
	padding: 10rpx 0;
}

.radio-label {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #333;
}

.input {
	width: 100%;
	height: 80rpx;
	border: 1rpx solid #e0e0e0;
	border-radius: 8rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}

.save-btn {
	height: 90rpx;
	line-height: 90rpx;
	background-color: #007aff;
	color: #fff;
	border-radius: 45rpx;
	font-size: 32rpx;
	margin-top: 40rpx;
}
</style>